<template>
	<view style="padding: 30rpx;">
		<u-form label-width="160rpx">
			<u-form-item label="手机号"><u-input placeholder="请输入手机号" v-model="form.Phone"></u-input></u-form-item>
			<u-form-item label="验证码">
				<u-input v-model="form.Code" placeholder="请输入验证码"></u-input>

				<u-button :disabled="showCountDown" type="warning" size="mini" class="u-m-l-10" @tap="getSms">
					获取验证码
					<block v-if="showCountDown">
						(
						<u-count-down
							@end="onCountDownEnd"
							bg-color="transparent"
							color="#fff"
							ref="countDown"
							:autoplay="false"
							:timestamp="countDown"
							:show-days="false"
							:show-hours="false"
							:show-minutes="false"
						></u-count-down>
						)
					</block>
				</u-button>
			</u-form-item>
			
			<u-form-item label="新密码">
				<u-input v-model="form.Password" type="password" placeholder="请输入新密码"></u-input>
			</u-form-item>
			
			<u-form-item label="确认密码">
				<u-input v-model="ConfirmPassword" type="password" placeholder="请再次输入新密码"></u-input>
			</u-form-item>

			<view style="margin-top: 40rpx;"><u-button @tap="submit" type="warning">确认修改</u-button></view>
		</u-form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				Phone: '',
				Code: '',
				Password: ''
			},
			
			countDown: 59,
			ConfirmPassword: '',
			showCountDown: false
		};
	},

	methods: {
		
		getSms() {
			if(!this.form.Phone) {
				this.$u.toast('请输入手机号')
				return false;
			}
			
			this.showCountDown = true;
			this.$nextTick(function(){
				this.$refs.countDown.start()
			})
			
			this.$u.api.getSms({
				Phone: this.form.Phone
			}).then(res => {
				const { ResultCode, ResultMessage } = res;
				if(ResultCode == 1) {
					this.$u.toast(ResultMessage)
				}
			})
		},
		
		submit() {
			if (!this.form.Password) {
				this.$u.toast('请输入新密码');
				return false;
			}

			if (this.ConfirmPassword != this.form.Password) {
				this.$u.toast('两次输入的密码不一致, 请重新输入');
				return false;
			}

			this.$u.api.updatePasswordByCode(this.form).then(res => {
				const { ResultCode, ResultMessage } = res;
				if (ResultCode == 1) {
					this.$u.toast(ResultMessage);
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			});
		}
	}
};
</script>

<style lang="scss"></style>
